How do you control text overflow in a fixed-width container?
Controlling Text Overflow in CSS
When text content exceeds the width of a container, CSS provides properties to control how the overflow behaves. This is essential for maintaining clean layouts, especially for fixed-width UI elements like cards, buttons, or table cells.
- 1
overflow: hidden;– Hides any text that exceeds the container boundaries. - 2
overflow: scroll;– Adds scrollbars so users can scroll to see hidden content. - 3
overflow: auto;– Adds scrollbars only when content overflows. - 4
text-overflow: ellipsis;– Displays an ellipsis (…) for clipped text; works only withoverflow: hiddenandwhite-space: nowrap. - 5
white-space: nowrap;– Prevents text from wrapping to the next line, required for single-line ellipsis.
The first example truncates text with an ellipsis when it overflows the fixed-width container. The second example allows scrolling when content exceeds the width or height of the container.
- 1
Use
text-overflow: ellipsisfor single-line text that must fit within a container. - 2
For multi-line content, consider
overflow: autoor expandable sections. - 3
Always test text overflow on different screen sizes for responsiveness.
- 4
Combine with
white-spaceandwidthto control layout precisely.